<!-- 购物车 组件 -->

<template>

  <div class="shopcart">

    <!-- 购物车 -->
    <div class="content">
      <!-- 主要内容 -->
      <div class="main-content">
        <div class="left" @click="toggleList">
          <div class="logo-wrapper">
            <div class="logo">
              <i class="iconfont icon-cart"></i>
            </div>
            <div class="totalCount" v-show="cartdataNum>0">{{cartdataNum}}</div>
          </div>

          <div class="price" :class="{'priceLight':cartdataNum > 0}">￥{{ cartdataJine}}</div>
          <div class="desc">{{czinfo.bcanzLxMc}}-{{czinfo.zhuoh}}</div>
        </div>

        <div class="right" @click="toggleList">
          <div class="pay payLight">
            <i class="iconfont icon-good" v-if="payDesc==='点好了'"></i>{{ payDesc }}</div>
        </div>
      </div>
      <!-- 购物车列表 -->
      <transition name="fold">
        <div v-transfer-dom>
          <popup v-model="openCart" position="right" width="80%">
            <!-- <popup-header :title="czinfo.bcanzLxMc+'-'+czinfo.zhuoh" left-text="关闭" right-text="清空" @on-click-left="hideList" @on-click-right="empty"></popup-header> -->
            <!-- <x-header :left-options="{showBack: false}" style="background-color: #4ab7f7;">{{czinfo.bcanzLxMc}}-{{czinfo.zhuoh}}</x-header> -->
            <div class="cart-popup-header">
              <!-- 关闭X -->
              <div @click="hideList" class="left">
                <i class="vux-close"></i>
              </div>
              <!-- 文字 -->
              <div class="content">{{czinfo.bcanzLxMc}}-{{czinfo.zhuoh}}</div>
              <!-- 清空 -->
              <div @click="empty" class="right">
                <i class="iconfont icon-delete"></i>清空
              </div>
            </div>

            <div class="cart-popup-content">
              <view-box style="width: 100%;">
                <ul>
                  <li class="food" v-for="(item,index) in descCart" :key="index">
                    <span class="title">{{item.mingc }}/{{item.guig}}</span>
                    <span class="desc" v-if="item.beiz!=''">{{ item.beiz }}</span>

                    <div class="price">
                      <span>￥{{item.danj * item.shul}}</span>
                    </div>

                    <div class="control">
                      <transition name="move">
                        <div class="logo-wrapper" @click="subtract($event,0,item.id,item.bcaipListId,item.shuxids)">
                          <div class="logo" style="z-index:50;">
                            <i class="iconfont icon-subtract"></i>
                          </div>
                        </div>
                      </transition>

                      <div class="num">{{item.shul}}</div>

                      <div class="logo-wrapper" @click="add($event,0,item.id,item.bcaipListId,item.shuxids)">
                        <div class="logo">
                          <i class="iconfont icon-add"></i>
                        </div>
                      </div>
                    </div>

                  </li>
                </ul>
              </view-box>

            </div>
            <div class="cart-popup-desc">
              <x-input placeholder="备注信息" placeholder-align="center" text-align="center" class="input" v-model="beiz">
                <i slot="label" class="iconfont icon-edit"> </i>
              </x-input>
            </div>

            <div class="cart-popup-foot">

              <div class="left">
                <span>{{cartdataNum}}份/￥{{cartdataJine}}</span>
              </div>

              <div class="right" @click="xdqr=true">
                下单
              </div>
            </div>
          </popup>
        </div>
      </transition>

      <div v-transfer-dom>
        <x-dialog :show="loading" :dialog-style="{'max-width': '100%', width: '100%', height: '60%', 'background-color': 'transparent'}">
          <span v-if="!qrcode" style="color:#fff;padding-top:20px;">
            <spinner type="android" size="40px"></spinner>{{dialogMsg}}</span>

          <div @click="hideList" v-if="closeDialog">
            <span class="vux-close" style="color:#fff;"></span>
          </div>

        </x-dialog>

        <x-dialog :show="qrcode">
          <div style="height:30px;width:100%;padding-right:-10px;">
            <span class="pull-right vux-close" @click="hideList"></span>
          </div>
          <span>请将订单号出示给服务</span><br>
          <span>由服务员确认订单，谢谢</span><br>
          <span style="font-size:48px;">{{fcode}}</span><br>
          <div>

          </div>

        </x-dialog>

         <confirm v-model="xdqr"
     
      @on-cancel="xdqr=false"
      @on-confirm="save_time">
        <span style="font-size:18px;">确认要下单吗？</span><br>
        
      </confirm>


        <!-- <confirm v-model="qrcode"
      confirm-text="返回"
      cancel-text ="关闭"
      @on-cancel="showqr"
      @on-confirm="hideList">
        <span>请将订单号出示给服务</span><br>
        <span>由服务员确认订单，谢谢</span><br>
        <qrcode :value="qrcode_data" :size=180 type="img"></qrcode>
        <br>
        <span style="font-size:48px;">{{fcode}}</span>
      </confirm> -->

        <!-- <confirm v-model="closeqr" >
      confirm-text="是"
      cancel-text ="否"
      @on-cancel="qrcode=true"
      @on-confirm="onCancel">
        <span>关闭后将清除购物车</span><br>
        <span>是否继续？</span><br>
        <qrcode :value="qrcode_data" :size=180 type="img"></qrcode>
        
      </confirm>  -->

        <!-- <x-dialog :show="qrcode" >
          <span  style="color:#000">请将二维码出示给服务员</span><br>
          <span style="color:#000">由服务员确认订单，谢谢</span><br><br>
          <qrcode :value="qrcode_data" type="img"></qrcode>
          <div @click="hideList" >
            <span class="vux-close" style="color:#000;"></span>
          </div>

        </x-dialog> -->

      </div>

    </div>

  </div>

</template>

<script>
import {
  Popup,
  PopupHeader,
  ViewBox,
  XInput,
  XHeader,
  Group,
  XDialog,
  TransferDom,
  Spinner,
  Qrcode,
  Confirm
} from "vux";

import { sign, signStr } from "@/assets/js/sign.js";

export default {
  directives: {
    TransferDom
  },
  components: {
    Popup,
    PopupHeader,
    ViewBox,
    XInput,
    Group,
    XDialog,
    Spinner,
    Qrcode,
    XHeader,
    Confirm
  },
  data() {
    return {
      openCart: false,
      qrcode: false,
      loading: false,
      qrcode_data: "正下单",
      beiz: "",
      dialogMsg: "正在提交数据，请勿退出程序",
      closeDialog: false,
      fcode: "",
      closeqr: false,
      xdqr:false,
    };
  },

  props: {
    // 加入购物车的商品
    cartdata: {
      type: Object
    },
    cartdataNum: {
      type: Number,
      default() {
        return 0;
      }
    },
    cartdataJine: {
      type: Number,
      default() {
        return 0;
      }
    },
    binfo: { type: Object },
    czinfo: { type: Object }
  },
  watch: {},
  methods: {
    toggleList() {
      if (Object.keys(this.cartdata).length > 0) {
        this.openCart = true;
      }
    },

    // 清空
    empty() {
      this.$emit("setNull");
      this.openCart = false;
    },

    hideList() {
      this.openCart = false;
      this.loading = false;
      this.qrcode = false;
      this.closeDialog = false;
    },
    onCancel() {
      this.hideList();
      this.empty();
    },
    showqr() {
      this.closeqr = true;
    },
    add(event, _type, _id, _bcaipListId, _sxids) {
      if (_type == 1) {
        //购物车里已经存在 ，数据加1，可退数据+1
        this.orderData.forEach(item => {
          if (item.bcaipListId == _bcaipListId && item.id == _id) {
            item.shul += 1;
            item.ketsl += 1;
            item.jine = parseFloat(item.shul) * parseFloat(item.danj);
            item.jineYj = parseFloat(item.shul) * parseFloat(item.danjYj);
          }
        });
        return;
      }

      this.isSave = true;
      this.$emit(
        "addCart",
        event.target,
        _id,
        null,
        _bcaipListId,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        _sxids,
        null,
        ""
      );
    },
    subtract(event, _type, _id, _bcaipListId, _sxids) {
      if (_type == 1) {
        //购物车里已经存在 ，数据加1，可退数据+1
        this.orderData.forEach((item, index) => {
          if (item.bcaipListId == _bcaipListId && item.id == _id) {
            if (item.shul == 1) {
              //记录是否要删除
              if (item.id > 0) {
                this.info.orderData.push(_id);
              }

              this.orderData.splice(index, 1);
            } else {
              item.shul -= 1;
              item.ketsl -= 1;
              item.jine = parseFloat(item.shul) * parseFloat(item.danj);
              item.jineYj = parseFloat(item.shul) * parseFloat(item.danjYj);
            }
          }
        });
        return;
      }

      this.$emit("subtractCart", _id, _bcaipListId, _sxids);
    },
    save_time() {
      this.loading = true;
      setTimeout(() => {
        this.save();
      }, 1500);
    },
    save() {
      let params = sign("/v1/api/goods/LsDDadd");
      params.append("sjid", this.binfo.id);
      params.append("czid", this.czinfo.id);
      params.append("hyid", this.$store.getters.getMemberPtId);
      params.append("canzh", this.czinfo.zhuoh);
      params.append("zdbeiz", this.beiz);
      params.append("DdMxList", JSON.stringify(Object.values(this.cartdata)));

      this.$http
        .post("goods/LsDDadd", params)
        .then(ret => {
          if (ret.status == 200) {
            var _data = ret.data.resultObject;

            var _code = ret.data.code || ret.data.result.code;
            var _msg = ret.data.msg || ret.data.result.msg;

            if (_code == 1) {
              this.qrcode_data = _data.qrcode;
              this.fcode = _data.fcode;

              this.loading = false;
              this.qrcode = true;
            } else {
              this.dialogMsg = _msg;
            }
            this.closeDialog = true;
          } else {
            this.dialogMsg = _msg;
            this.closeDialog = true;
          }
        })
        .catch(err => {
          this.hideList();
          this.$vux.toast.show({
            type: "warn",
            text: ret.data.msg
          });
        });
      // setTimeout(() => {
      //   this.qrcode = true;
      // }, 2000);
    }
  },
  computed: {
    // 所选商品总价
    descCart() {
      return Object.values(this.cartdata).sort((a, b) => {
        // return a.paixh < b.paixh ? 1 : -1;//倒序
        return a.paixh < b.paixh ? -1 : 1; //顺序
      });
    },

    payDesc() {
      // if (this.cartdata.length > 0) {
      if (Object.keys(this.cartdata).length > 0) {
        //console.log(Object.keys(this.cartdata))
        return "点好了";
      } else {
        return "请选择";
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~@/assets/scss/const.scss";
@import "~@/assets/scss/mixin.scss";

.shopcart {
  .content {
    position: fixed;
    left: 0;
    bottom:54px;
    width: 100%;
    height: 46px;
    z-index: 10;
    .main-content {
      display: flex;
      width: 100%;
      height: 46px;
      font-size: 0;
      background-color: #141d27;
      .left {
        flex: 1;
        text-align: left;
        .logo-wrapper {
          display: inline-block;
          position: relative;
          top: -10px;
          box-sizing: border-box;
          margin-left: 10px;
          width: 48px;
          height: 48px;
          border-radius: 50%;
          vertical-align: top;
          text-align: center;
          background-color: #141d27;
          .logo {
            width: 100%;
            height: 100%;
            border-radius: 50%;

            background-color: #2b343c;
            i {
              font-size: 30px;
              line-height: 50px;
              color: #80858a;
            }
          }
          .logoLight {
            background-color: #ffda61;
            & i {
              color: #333;
            }
          }
          .totalCount {
            position: absolute;
            right: 0;
            top: 0;
            width: 26px;
            height: 20px;
            line-height: 20px;
            border-radius: 20px 20px;
            font-size: 14px;
            font-weight: 700;
            color: #fff;
            background-color: rgb(240, 20, 20);
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
          }
        }
        .price {
          display: inline-block;
          box-sizing: border-box;
          margin-top: 12px;
          padding-right: 10px;
          vertical-align: top;
          font-size: 20px;
          line-height: 22px;
          font-weight: 700;
          color: rgba(255, 255, 255, 0.4);
          border-right: 1px solid rgba(255, 255, 255, 0.1);
          &.priceLight {
            color: #fff;
            font-size: 20px;
          }
        }
        .desc {
          display: inline-block;
          vertical-align: top;
          margin-top: 12px;
          // padding-right: 6px;
          margin-left: 6px;
          vertical-align: top;
          font-size: 16px;
          font-weight: 700;
          line-height: 22px;
          color: rgba(255, 255, 255, 0.829);
        }
      }
      .right {
        flex: 0 0 100px;
        width: 100px;
        text-align: center;
        .pay {
          height: 46px;
          line-height: 46px;
          font-size: 16px;
          font-weight: 700;
          color: rgba(255, 255, 255, 0.4);
          background-color: #2b333b;
          &.payLight {
            background-color: #ffa500;
            color: #fff;
          }
        }
      }
      // 适配 iPhone 5
      @media screen and (max-width: 320px) {
        .right {
          flex: 0 0 80px;
          width: 80px;
          text-align: center;
        }
      }
    }
  }
}

.logo-wrapper {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  // margin-left: 3px;
  padding: 2px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  // vertical-align: top;
  text-align: center;
  .logo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #ffa500;
    i {
      font-size: 22px;
      line-height: 26px;
      color: #ffffff;
    }
  }
}
.num {
  display: inline-block;
}
.cart-popup-header {
  display: flex;
  position: absolute;
  left: 0;
  height: 46px;
  top: 0;
  width: 100%;
  color: #fff;
  background-color: #4ab7f7;
  .left {
    flex: 50px 0 0;
    text-align: left;
    height: 46px;
    line-height: 46px;
    font-size: 20px;
    font-weight: 700;
    i {
      color: #fff;
    }
  }
  .content {
    flex: 1;
    text-align: center;
    line-height: 46px;
    font-size: 16px;
    font-weight: 700;

    width: 100%;
  }
  .right {
    flex: 0 0 60px;
    width: 60px;
    text-align: center;

    height: 46px;
    line-height: 46px;
    i {
      font-size: 20px;
    }
  }
}
.cart-popup-content {
  display: flex;
  position: absolute;
  top: 46px;
  bottom: 76px;
  width: 100%;
  background-color: #fff;
  overflow: hidden;
  .food {
    flex: 1;
    position: relative;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(7, 17, 27, 0.1);
    .title {
      display: flex;
      font-size: 14px;
      color: rgb(16, 34, 51);
    }
    .desc {
      display: flex;
      font-size: 12px;
      color: rgb(68, 70, 71);
    }
    .price {
      position: absolute;
      right: 95px;
      bottom: 8px;
      line-height: 24px;
      font-size: 14px;
      font-weight: 700;
      color: rgb(240, 20, 20);
    }
    .control {
      position: absolute;
      right: 0;
      bottom: 6px;
    }
  }
}
.cart-popup-desc {
  display: flex;
  position: absolute;
  width: 100%;
  height: 30px;
  line-height: 30px;
  bottom: 46px;
  background-color: #ffa500;
  color: #fff;
  .input {
    width: 100%;
    color: #fff;
  }
}
.cart-popup-foot {
  display: flex;
  position: absolute;
  left: 0;
  height: 46px;
  bottom: 0;
  width: 100%;
  background-color: #4ab7f7;
  .left {
    flex: 1;
    text-align: left;
    height: 46px;
    line-height: 46px;
    font-size: 20px;
    font-weight: 700;
    padding-left: 10px;
    color: #fff;
  }
  .right {
    flex: 0 0 100px;
    width: 100px;
    text-align: center;
    background-color: #ff1d61;
    color: #fff;
    height: 46px;
    line-height: 46px;
    font-size: 16px;
    font-weight: 700;
  }
}
</style>
